<template>
  <div class="master">
    <!-- 菜单部分 -->
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="black"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1" @click.native.prevent><router-link to="/mall/index">首页</router-link></el-menu-item>
      <el-submenu index="2">
        <template v-slot:title>
          <span v-if="name" style="color: orange">{{ name }}</span>
          <span v-else style="color: red"><router-link to="/mall/mycart">未登录</router-link></span>
        </template>
        <el-menu-item index="2-1" @click.native.prevent>
          <router-link to="/mall/user/order">我的订单</router-link>
        </el-menu-item>
        <el-menu-item index="2-2" @click.native.prevent>
          <router-link to="/mall/user/userCenter">我的资料</router-link>
        </el-menu-item>
        <el-menu-item index="2-3" divided @click.native="logout">退出登录</el-menu-item>
      </el-submenu>

      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4" @click.native.prevent><router-link to="/mall/mycart">购物车</router-link></el-menu-item>
    </el-menu>

    <!-- 卡片部分 -->
    <el-card class="box-card" style="background-color: #EDEDED">
      <div slot="header" class="clearfix">
        <!--    面包屑部分-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/mall/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!--      <内容-->
      <router-view />

    </el-card>

    <!-- 页尾部分 -->
    <div class="footer" style="background-color: #fff; text-align: center; color: #778899; font-family: 'Microsoft YaHei', sans-serif; padding: 0 0;">

      <div class="footer-container">
        <div class="footer-section">
          <h3 style="font-size: 16px; margin-bottom: 8px;">关于我们</h3>
          <p style="margin: 2px 0;">公司简介</p>
          <p style="margin: 4px 0;">团队介绍</p>
          <p style="margin: 4px 0;">联系我们</p>
        </div>

        <div class="footer-section">
          <h3 style="font-size: 16px; margin-bottom: 8px;">购物指南</h3>
          <p style="margin: 4px 0;">购物流程</p>
          <p style="margin: 4px 0;">会员注册</p>
          <p style="margin: 4px 0;">支付方式</p>
        </div>

        <div class="footer-section">
          <h3 style="font-size: 16px; margin-bottom: 8px;">服务支持</h3>
          <p style="margin: 4px 0;">售后服务</p>
          <p style="margin: 4px 0;">配送方式</p>
          <p style="margin: 4px 0;">服务条款</p>
        </div>

        <div class="footer-section">
          <h3 style="font-size: 16px; margin-bottom: 8px;">关注我们</h3>
          <p style="margin: 4px 0;">微信</p>
          <p style="margin: 4px 0;">微博</p>
          <p style="margin: 4px 0;">Facebook</p>
        </div>
      </div>

      <div class="footer-bottom" style="color: #778899; font-family: 'Microsoft YaHei', sans-serif; margin-top: 10px; padding-top: 10px; border-top: 1px solid #555;">
        &copy; 2023 版权为Gxust-Cst211-South4-106所有
      </div>

    </div>
  </div>
</template>

<script>
import { removeToken } from '@/utils/auth'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name'
    ])
  },
  methods: {
    logout() {
      this.$confirm('确定退出系统?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        removeToken()
        console.log('Token removed successfully.')
        this.$message({
          type: 'success',
          message: '退出成功!'
        })
        setTimeout(() => {
          this.$router.push({ path: '/login' })
        }, 1000)
      }).catch((error) => {
        console.error('Logout error:', error)
        this.$message({
          type: 'info',
          message: '已取消退出'
        })
      })
    }

  }

}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin: 0 auto;
  padding: 0; /* 消除内边距 */
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 0 0;
}

.footer-container {
  max-width: 100%; /* 设置最大宽度，可以根据实际需求调整 */
  margin: 0 auto; /* 居中 */
  display: flex;
  justify-content: space-around;
}

.footer-section {
  flex: 1;
}

.footer-section h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.footer-section p {
  margin: 5px 0;
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #555;
}
.master{
  background-color: #BDBDBD;
}
</style>
